<template>
  <div>
      <img id="image" src="../assets/logo.png">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    var $image = $('#image');
    $image.cropper({
        // aspectRatio: 9 / 5,
        autoCrop:false,
        zoomable:false,
        scalable:false,
        rotatable:false,
        ready:function(){
            $image.cropper('crop');
            $image.cropper('setData',{
                width:720,
                height:400
            });
        },
        crop: function(event) {
            console.log(event.detail.x);
            console.log(event.detail.y);
            console.log(event.detail.width);
            console.log(event.detail.height);
            console.log(event.detail.rotate);
            console.log(event.detail.scaleX);
            console.log(event.detail.scaleY);
        }
    });
    $image.on('cropmove',function(e){
        var data=$image.cropper('getData');
        if(data.width<720||data.height<400){
            e.preventDefault();
        }
    });
    $image.on('cropend',function(e){
        var data=$image.cropper('getData');
        if(data.width<720||data.height<400){
            $image.cropper('setData',{ width:720,
                height:400});
        }
    });
    // Get the Cropper.js instance after initialized
    var cropper = $image.data('cropper');
  }
}
</script>

